@charset "utf-8";
*{
    margin:0;
    padding:0;
}
$fontSize:40;
@function r($p){
    @return $p/$fontSize*1rem;
}
@function f($fz) {
    @return $fz / 14 * 1em
}

html,body{
    width:100%;
    height:100%;
    overflow: hidden;
}
body{
    background:#222;
}
.web{ 
        position: relative;
        width:100%;
        height:100%;

                >nav{
                   
                    z-index: 1000;
                    .nav_box{
                            
                            .logo{
                                display:flex;
                                display:-webkit-flex;
                                align-items: center;
                            }
                    }
                }//nav
        >.content{
              
                position: absolute;
                left:0;
                right: 0;
                bottom:0;
                top:50px;
               
                
                /*height: calc(100% - 50px);*/
                overflow: auto;
                .banner_img{
                    >img{
                        width:100%;
                    }
                }  
                >.yinqing{
                    background:#FBFAF8;
                    padding-top:104px;
                    padding-bottom:45px;
                    border-bottom:#eaeaed 1px solid;
                        >.yin_width{
                            margin: 0 auto;
                            width:65%;
                            padding:0;
                                >.yinqing_left{
                                    position: relative;
                                    z-index: 999;
                                    >.yq_title{
                                        font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
                                        font-size:48px;
                                        font-weight: bold;
                                        color: #0078d7;
                                    }
                                    >p{
                                        color:#666666;
                                        font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
                                        font-size: 30px;
                                        // margin-bottom:r(78);
                                    }
                                    >.yq_ul{
                                        
                                        >.yq_li{
                                            margin-top:50px;
                                            padding-right:0;
                                            display: flex;
                                            display:-webkit-flex;
                                            align-items: flex-start;
                                            align-content: flex-start;
                                            list-style: none;  
                                            >img{
                                                    width:65px;
                                                    height:65px;
                                                    margin-right:r(12);
                                            }
                                            >div{
                                                >h4{
                                                    margin-top:0;
                                                    font-size:18xp;
                                                    color:#333;
                                                }
                                                >p{
                                                    font-size:13px;
                                                    color:#656565;
                                                    padding-right:50px;
                                                    line-height: 28px;
                                                }
                                            }
                                        }
                                    }
                                }
                                >.yinqing_right{
                                    margin-top:37px;
                                }//yinqing_right
                        }
                        
                }//yingqing
                >.youshi{
                    background:#FFFFFF;
                    padding-top:115px;
                    padding-bottom:105px;
                        >.ys_box{
                            
                                // display: flex;
                                // display: -webkit-flex;
                                // align-items: center;
                                >.youshi_left{
                                            text-align: center;
                                            margin-top:80px;
                                            >img{
                                                width:90%;
                                            }
                                }
                                >.youshi_right{
                                            margin-left:r(50);
                                        
                                            >h1{
                                                font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
                                                font-size:48px;
                                                font-weight: bold;
                                                color: #8fc31f;
                                                margin-bottom:40px;
                                            }
                                            >ul{
                                                padding-left:r(10);
                                                >.ys_li{
                                                    display:flex;
                                                    display:-webkit-flex;
                                                    align-items: center;
                                                    margin-top:18px;
                                                    >img{
                                                        width:55px;
                                                        height:55px;
                                                        margin-right:10px;
                                                    }
                                                    >p{
                                                        margin:0;
                                                        color:#656565;
                                                        font-size:14px;
                                                    }
                                                }
                                            }
                                    
                                }
                        }
                }//youshi
                >.jiazu{
                    
                    background:#0079D7;
                    >p{
                        font-size:f(48);
                        color:#fff;
                        margin:0 auto;
                        text-align: center;
                    }
                    >.row{
                        width:65%;
                        margin:0 auto;
                       
                        >.jiazu_middle{
                                    >.jiazu_left_ul{
                                                     display: flex;
                                                     display:-webkit-flex;
                                                     flex-wrap: wrap;
                                                    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
                                                    >.jiazu_left_li{
                                                            
                                                            margin-top:78px;
                                                            display: flex;
                                                            display:-webkit-flex;
                                                            align-items: center;
                                                            >img{
                                                                 width:64px;
                                                                 height:64px;   
                                                            }
                                                            >div{
                                                                padding-left:r(60);
                                                                padding-right: r(90);
                                                                >h4{
                                                                    font-size: f(32);
                                                                    color:#fff;
                                                                    font-weight: 100;
                                                                }
                                                                >p{
                                                                    font-size:f(14);
                                                                    color:#fff;
                                                                }
                                                            }
                                                              
                                                    }
                                    }
                        }
                    }
                }
                >.game{
                    padding-top:87px;
                    padding-bottom:50px;
                    background:#fff;
                    >.row{
                            width:65%;
                            margin:0 auto;
                            >.game_title{
                                
                                margin-bottom:50px;
                                    color:#292929;
                                    display: flex;
                                    display: -webkit-flex;
                                    justify-content: space-between;
                                    align-items: flex-start;
                                    >p{
                                        font-size:f(35);
                                        padding:0;
                                        margin:0;
                                    }
                                    >span{
                                        display: block;
                                        font-size:f(14);
                                        margin-top:5px;
                                    }
                            }//game_title
                            >.game_img{
                                    >.left_img{
                                        padding:0;
                                        >img{
                                            width:100%;
                                            border-radius: 10px;
                                        }
                                    }
                                    >.right_img{
                                        >.row{
                                            // padding-left:r(50);
                                            >.game_box{
                                                display: flex;
                                                display:-webkit-flex;
                                                flex-direction: column;
                                                justify-content:center;
                                                padding:0;
                                                margin:0;
                                                margin-bottom:r(80);
                                               
                                                
                                                >span{
                                                    
                                                    display: inline-block;
                                                    margin-top:5px;
                                                    text-align: center;
                                                }
                                                >a{
                                                    text-align: center;
                                                    display: block;

                                                    >img{
                                                        width:80%;
                                                    }    
                                                }
                                            }
                                        }
                                    }
                            }
                    }
                }//game
                >.team{
                    padding-top:40px;
                    padding-bottom:60px;
                    background:#f4f4f4;
                    >.team_title{
                          width:65%;
                          margin:0 auto;
                          display:flex;
                          display:-webkit-flex; 
                          align-items: baseline;
                          color:#292929;
                          >p{
                              font-size:f(30);
                          }
                          >span{
                              font-size:f(11);
                              color:777;
                          }
                    }
                    >.team_img{
                          width:65%; 
                          margin:0 auto;
                          >div{
                              padding:0;
                              padding-right:r(17);
                              margin-top:20px;
                              >img{
                                  width:100%;
                                  border:#ddd 1px solid;
                              }
                          }
                    }
                }
                >footer{
                    padding-top:30px;
                    padding-bottom:60px;
                    >.foot_row{
                        display: flex;
                        display: -webkit-flex;
                        align-items: center;
                        width:65%;
                        margin:0 auto;
                        justify-content: space-between;
                        >.footer_content{
                            >ul{
                                display:flex;
                                display:-webkit-flex;
                                >li{
                                    margin-right: r(15);
                                    font-size:14px;
                                    list-style: none;
                                    color:#A1A3AB;
                                }   
                                
                            }
                            >p{
                                    font-size:12px;
                                    color:#A1A3AB;
                            }
                        }
                        >ul{
                            position: relative;
                            display: flex;
                            display: -webkit-flex;
                            >li{
                                list-style: none;
                                margin-left:r(20);
                            }
                            >li:nth-of-type(2):hover~div{
                                display:inline-block;
                            }  
                            >div{
                                display: none;
                                position: absolute;
                                top:-230%;
                                left:55%;
                                transform: translateX(-45%);
                                text-align: center;
                                >img{
                                    width:100%;
                                }
                            } 
                        }
                    }
                }
              
    }//content
}//web

@media only screen and (min-width: 768px) {
    html,
    body {
        min-width: 1141px;
        .web{
            >nav{
                
                    position: absolute;
                    z-index: 999;
                    top:0;
                    left:50%;
                    transform: translateX(-50%);
                    margin:0 auto;
                    margin-bottom:0;
                    width:65%;
                    border: none;
            }
        }
     
    }
}
@media only screen and (max-width: 768px) {

        // min-width: 2000px;
        .web{
            width:100%;
            // overflow: hidden;
            >nav{
                    width:100%;
              
            }//nav
            >.content{
                width:100%;
                // overflow: hidden;
                >.yinqing{
                    padding-top:30px;
                    >.yin_width{
                        width:100%;
                        >.yinqing_left{
                            >.yq_title{
                                text-align: center;
                                font-size:f(21);
                                margin-bottom:30px;
                            }
                            >p{
                                font-size:f(18);
                                padding:0;
                                margin:0;
                            }
                            >.yq_ul{
                                >.yq_li{
                                    margin-top:25px;
                                    
                                    >div{
                                        margin:r(10);
                                        padding-right:r(20);
                                        >p{
                                            padding:0;
                                            margin:0;
                                        }
                                    }
                                }
                              
                            }
                        }//yinqing_left
                     
                    }
                }//yinqing
                >.youshi{
                        padding-top:0;
                        padding-bottom:30px;
                        >.ys_box{
                                >.youshi_left{
                                     margin-top:r(50);
                                         
                                }
                                >.youshi_right{
                                    margin-left:0;
                                       >h1{
                                          font-size: f(21);
                                          text-align: center;
                                       }
                                       >ul{
                                           >.ys_li{
                                            //    justify-content: center;
                                            padding:0 r(60);
                                           }
                                       }
                                }
                        }
                }//youshi
                >.jiazu{
                    padding-top:60px;
                    padding-bottom:30px;
                    >p{
                        font-size:f(21);
                    }
                    >.row{
                        width:100%;
                        >.jiazu_middle{
                            margin:0 auto;
                            >.jiazu_left_ul{
                                margin:0 auto;
                            }
                        }
                    }
                }//jiazu
                >.game{
                   
                    >.row{
                            width:100%;
                            margin:0 auto;
                            >.game_title{
                                
                                    >p{
                                        font-size:f(21);
                                        padding:0;
                                        margin:0;
                                    }
                                    >span{
                                      
                                    }
                            }//game_title
                            >.game_img{
                                    >.left_img{
                                       
                                        >img{
                                          
                                        }
                                    }
                                    >.right_img{
                                        margin-top:20px;
                                    }
                            }
                    }
                }//game
                >.team{
                    padding-top:40px;
                    padding-bottom:60px;
                    background:#f4f4f4;
                    >.team_title{
                          width:100%;
                          margin:0 auto;
                       
                    }
                    >.team_img{
                        width:100%;  
                        margin:0 auto;
                    }
                }
                >footer{
                    padding-top:30px;
                    padding-bottom:60px;
                    >.foot_row{
                        display: flex;
                        display: -webkit-flex;
                        align-items: center;
                        flex-wrap: wrap;
                        width:100%;
                        margin:0 auto;
                        >.footer_content{
                            width:100%;
                            >ul{
                                display:flex;
                                display:-webkit-flex;
                                >li{
                                    margin-right: r(15);
                                    font-size:14px;
                                    list-style: none;
                                    color:#A1A3AB;
                                }   
                                
                            }
                            >p{
                                    font-size:12px;
                                    color:#A1A3AB;
                            }
                        }
                    }
                }
            }//content

        }//web
     
    }